<template>
    <div class="image-box" :class="className" :style="boxStyle">

        <template v-if="data.data && data.data.length > 0">
            <!-- <a v-for="(item, index) in data.data" :key="index" :href="item.link">
                <img :src="item.url">
            </a> -->
            
            <div v-if="className == 'one'">
                <div class="OneItem" v-for="(item, index) in data.data" :key="index" >
          
                    <img  :src="item.url" >
                </div>
            </div>
            <div class="TwoView" v-if="className == 'two'">
                <div class="TwoItem" v-for="(item, index) in data.data" :key="index">
                    <img :src="item.url">
                </div>
            </div>
            <div class="ThreeView" v-if="className == 'three'">
                <div class="ThreeItem" v-for="(item, index) in data.data" :key="index">
                    <img :src="item.url">
                </div>
            </div>


        </template>
        <template v-else>
            <div v-if="className == 'one'">
                <div class="image-null">
                    <span class="el-icon-picture"></span>
                </div>
            </div>
            <div v-if="className == 'two'" class="TwoView">
                <div class="TwoItem">
                    <span class="el-icon-picture"></span>
                </div>
                <div class="TwoItem">
                    <span class="el-icon-picture"></span>
                </div>
            </div>
            <div v-if="className == 'three'" class="ThreeView">
                <div class="ThreeItem">
                    <span class="el-icon-picture"></span>
                </div>
                <div class="ThreeItem">
                    <span class="el-icon-picture"></span>
                </div>
                <div class="ThreeItem">
                    <span class="el-icon-picture"></span>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import diyMixin from './diyMixin.js';
    export default {
        name: 'Images',
        props: ['data', 'className',],
        mixins:[diyMixin],
        
        data() {
            return {
                list: {},
            }
        },
        mounted() {
            // this.list = this.data
            console.log(this.className);
        },

        methods: {

        }
    }
</script>

<style lang="less" scoped>
    .image-box {
        font-size: 0;
        background: #FFFFFF;

        img {
            width: 100%;
            max-width: 100%;
            height: 100%;
        }

        .image-null {
            background: #ffffff;
            font-size: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c1c1c1;
            width: 100%;
            min-height: 200px;
        }

        .TwoView {
            display: flex;
            align-items: center;
            width: 100%;
            font-size: 50px;
            color: #c1c1c1;
            flex-wrap: wrap;

            .TwoItem {
                width: 50%;
                background: #fff;
                height: inherit;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .ThreeView {
            display: flex;
            align-items: center;
            height: 130px;
            width: 100%;
            font-size: 50px;
            color: #c1c1c1;
            flex-wrap: wrap;

            .ThreeItem {
                width: 33%;
                background: #fff;
                height: inherit;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* a {
            display: block;
        } */

        /* &.two {
            display: flex;
            flex-wrap: wrap;
            box-sizing: content-box;

            a {
                width: 50%;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                display: block;
                padding-bottom: 50%;
                background: #e4e4e4;

                img {
                    position: absolute;
                }
            }
        } */

        /* &.three {
            height: 100px;
            overflow-y: auto;
            white-space: nowrap;
            box-sizing: content-box;

            a {
                width: 100px;
                height: 100px;
                margin: 0 4px;
                display: inline-block;
                vertical-align: bottom;
                background: #e4e4e4;
            }

            .image-null {
                background: #ffffff;
                height: 100px;
                font-size: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #c1c1c1;
                width: 100%;
            }
        } */
    }
</style>